<template>
	<div class="container">
		<div class="box" v-for="(image, index) in images" :key="index">
			<img
				:src="image.url"
				@load="image.load = true"
				@error="image.error = true"
				ref="image"
			/>
			<div style="min-height: 84px" v-show="!image.load && !image.error"></div>
			<flex-box
				v-show="!image.load && !image.error"
				justify="center"
				align="center"
				class="mask"
			>
				<van-loading size="34px" color="#5f88ff" />
			</flex-box>
		</div>
	</div>
</template>

<script>
export default {
	props: {
		urls: {
			type: Array,
			default: () => []
		}
	},
	watch: {
		urls: {
			handler(val) {
				this.images = val.map((url) => {
					return {
						url,
						load: false,
						error: false
					}
				})
				this.$nextTick(this.checkComplete)
			},
			immediate: true
		}
	},
	data() {
		return {
			images: []
		}
	},
	computed: {},
	mounted() {},
	methods: {
		checkComplete() {
			Array.from(this.$refs.image).forEach((image, index) => {
				if (image.complete) {
					this.images[index].load = true
				}
			})
		}
	},
	components: {}
}
</script>

<style lang="scss" scoped="scoped">
.container .box img {
	display: block;
	width: 100%;
	height: auto;
}
.box {
	position: relative;
}
.mask {
	@include abs;
}
</style>
